<template>
  <div>
    <Header></Header>
    <div class="ctx-outer df">
      <div class="ctx-image">
        <div class="btn-header">
          <a-button @click="$router.go(-1)">
            <template #icon>
              <icon-font type="icon-arrowleft"></icon-font>
            </template>
            <span>返回</span>
          </a-button>
          <a-select style="margin-left: 16px" v-model:value="selected" @change="areaChange">
            <a-select-option
              v-for="item in options"
              :key="item.code"
              :value="item.code"
              :label="item.name"
              >{{ item.name }}
            </a-select-option>
          </a-select>
        </div>
        <img :src="require(`@/assets/images/home/${$route.query.code || 1}.png`)" alt="" />
        <div class="ctx-tips" v-if="selected === '1'">
          <div class="ctx-icon" :style="{ top: `${170}px`, left: `${240}px` }">
            <span class="tips-name pointer tips-name-gray">新教楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${190}px`, left: `${520}px` }">
            <span class="tips-name pointer">存中楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${280}px`, left: `${270}px` }">
            <span class="tips-name pointer">文荟楼</span>
          </div>
        </div>
        <div class="ctx-tips" v-else-if="selected === '2'">
          <div class="ctx-icon" :style="{ top: `${280}px`, left: `${190}px` }">
            <span class="tips-name pointer tips-name-gray">化工楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${260}px`, left: `${320}px` }">
            <span class="tips-name pointer">药学院</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${260}px`, left: `${420}px` }">
            <span class="tips-name pointer">协同中心</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${210}px`, left: `${550}px` }">
            <span class="tips-name pointer">高等研究院</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${155}px`, left: `${660}px` }">
            <span class="tips-name pointer">公共楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${220}px`, left: `${670}px` }">
            <span class="tips-name pointer">材料学院</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${160}px`, left: `${180}px` }">
            <span class="tips-name pointer">子良楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${130}px`, left: `${390}px` }">
            <span class="tips-name pointer">食品学院</span>
          </div>
        </div>
        <div class="ctx-tips" v-else>
          <div class="ctx-icon" :style="{ top: `${210}px`, left: `${300}px` }">
            <span class="tips-name pointer">计算机楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${310}px`, left: `${140}px` }">
            <span class="tips-name pointer">建工楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${130}px`, left: `${390}px` }">
            <span class="tips-name pointer">建行楼</span>
          </div>
          <div class="ctx-icon" :style="{ top: `${2}px`, left: `${600}px` }">
            <span class="tips-name pointer">广知楼</span>
          </div>
        </div>
      </div>
      <div class="ctx-right">
        <p class="fs-18 pdl-24 pdt-24">xx的课程有18个</p>
        <div class="list-list">
          <div class="list-item" v-for="item in list" :key="item.id" @click="goVideoPage(item)">
            <img class="list-item__img" :src="item.img" alt="" />
            <div class="list-right">
              <p class="list-item__title">{{ item.title }}</p>
              <p class="list-item__text">
                <span>教师：</span>
                <span class="list-item__text--res">{{ item.username }}</span>
              </p>
              <p class="list-item__text">
                <span>教室：</span>
                <span class="list-item__text--res">{{ item.classroom }}</span>
              </p>
              <p class="list-item__text">
                <span>班级：</span>
                <span class="list-item__text--res">{{ item.className }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, ref, onMounted, watch } from 'vue'
  import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
  import { useRoute, useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import Header from '@/layout/header/index.vue'
  import { IconFont } from '@/components/iconfont'
  import { getCourseList } from '@/api/homepage'

  export default defineComponent({
    name: 'Markcomponent',
    components: {
      Header,
      IconFont,
    },
    setup() {
      const tableRef = ref<InstanceType<typeof DynamicTable>>()

      const valueDate = ref<moment.Moment[]>([])

      const route = useRoute()

      const router = useRouter()

      const store = useStore()

      const state = reactive({
        selected: '1' as any,
        options: [
          { code: '1', name: '朝晖校区' },
          { code: '2', name: '莫干山校区' },
          { code: '3', name: '屏峰校区' },
        ],
        list: [] as any,
      })

      const areaChange = (ev) => {
        router.push(`/mapdetail?code=${ev}`)
      }
      watch(
        () => route.query.code,
        (val) => {
          console.log(val)
          state.selected = val
        }
      )

      onMounted(async () => {
        state.selected = route.query.code
        getData({})
      })

      const getData = async (params) => {
        console.log(params)
        const res = await getCourseList(params)
        state.list = res.list
      }
      const goVideoPage = (item) => {
        // window.open(`#/screen?id=${item.id}`, '_blank')
        router.push(`/screen?id=${item.id}`)
      }
      return {
        ...toRefs(state),
        tableRef,
        areaChange,
        goVideoPage,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .ctx-outer {
    margin: 0 auto;
    overflow: hidden;
    height: calc(100vh - 64px);
    width: 1400px;
    // justify-content: flex-end;
  }
  .ctx-image {
    width: 1000px;
    position: relative;
    > img {
      width: 100%;
      height: inherit;
    }
    .btn-header {
      position: absolute;
      left: 24px;
      top: 24px;
    }
  }
  .ctx-right {
    border-left: 1px solid #ddd;
    overflow-x: hidden;
    overflow-y: auto;
    position: sticky;
    top: 0;
  }
  .list-outer {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .list-empty {
    width: 100%;
    height: 100%;
  }
  .list-list {
    width: 100%;
    .list-item {
      // width: 186px;
      // height: 104px;
      padding: 12px;
      margin-right: 24px;
      margin-bottom: 24px;
      display: flex;
      color: #666;
      cursor: pointer;
      &:hover {
        background: #f9f9f9;
      }

      .list-item__time {
        margin-right: 32px;
        color: #999;
        line-height: 22px;
      }

      .list-item__img {
        width: 186px;
        height: 104px;
        border-radius: 4px;
        margin-right: 32px;
      }

      .list-right {
        display: flex;
        flex-direction: column;
        height: 104px;
      }

      .list-item__title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        white-space: nowrap;
      }

      .list-item__text {
        color: #999;
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .list-item__text--res {
          color: #666;
        }
      }
    }
  }
  .ctx-tips {
    position: absolute;
    top: 0;
    left: 0;
  }

  .ctx-icon {
    position: absolute;
    padding: 6px 12px;
    white-space: nowrap;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    &:hover {
      background: #5066e1;
      .tips-name {
        &:after {
          border-top: 6px solid #5066e1;
        }
      }
    }
    .tips-name {
      position: relative;
      &:before {
        content: '';
        font-size: 12px;
        margin-right: 4px;
        width: 6px;
        height: 6px;
        border-radius: 2px;
        vertical-align: 2px;
        background: #16ff11;
        display: inline-block;
      }
      &:after {
        content: '';
        border-top: 6px solid rgba(0, 0, 0, 0.65);
        border-bottom: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 25px;
      }
    }
    .tips-name-gray {
      &:before {
        background-color: #ddd;
      }
    }
  }
</style>
